<template>
  <div class="overview-cards">
    <!-- 用户统计卡片 -->
    <div class="stat-card user-card">
      <div class="card-header">
        <div class="card-icon">
          <el-icon size="24" color="#409EFF"><User /></el-icon>
        </div>
        <div class="card-info">
          <h3>登录情况</h3>
          <p class="card-description">系统登录统计</p>
        </div>
      </div>
      <div class="card-content">
        <div class="primary-stat">
          <span class="stat-value">{{ userStats.totalUsers }}</span>
          <span class="stat-label">总用户数</span>
        </div>
        <div class="secondary-stats">
          <div class="stat-item">
            <span class="stat-value">{{ userStats.onlineUsers }}</span>
            <span class="stat-label">今日登录用户</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ userStats.todayNewUsers }}</span>
            <span class="stat-label">今日登录次数</span>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <div class="progress-info">
          <span class="progress-label">活跃用户占比</span>
          <el-progress
            :percentage="Math.round((userStats.onlineUsers / userStats.totalUsers) * 100)"
            :show-text="false"
            color="#409EFF"
          />
        </div>
      </div>
    </div>

    <!-- 任务统计卡片 -->
    <div class="stat-card task-card">
      <div class="card-header">
        <div class="card-icon">
          <el-icon size="24" color="#67C23A"><Document /></el-icon>
        </div>
        <div class="card-info">
          <h3>项目管理</h3>
          <p class="card-description">项目交付情况</p>
        </div>
      </div>
      <div class="card-content">
        <div class="primary-stat">
          <span class="stat-value">{{ taskStats.pendingTasks }}</span>
          <span class="stat-label">本年项目</span>
        </div>
        <div class="secondary-stats">
          <div class="stat-item">
            <span class="stat-value">{{ taskStats.completedTasks }}</span>
            <span class="stat-label">已完成</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ taskStats.pendingTasks - taskStats.completedTasks }}</span>
            <span class="stat-label">进行中</span>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <div class="progress-info">
          <span class="progress-label">完成率</span>
          <el-progress :percentage="taskStats.weeklyProgress" :show-text="false" color="#67C23A" />
        </div>
      </div>
    </div>

    <!-- 工具使用统计卡片 -->
    <div class="stat-card tool-card">
      <div class="card-header">
        <div class="card-icon">
          <el-icon size="24" color="#E6A23C"><Tools /></el-icon>
        </div>
        <div class="card-info">
          <h3>工具使用</h3>
          <p class="card-description">工具使用统计</p>
        </div>
      </div>
      <div class="card-content">
        <div class="primary-stat">
          <span class="stat-value">{{ toolStats.totalUsage }}</span>
          <span class="stat-label">总使用次数</span>
        </div>
        <div class="secondary-stats">
          <div class="stat-item">
            <span class="stat-value">{{ toolStats.todayUsage }}</span>
            <span class="stat-label">今日使用</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ toolStats.userActivity }}%</span>
            <span class="stat-label">活跃度</span>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <div class="tool-info">
          <span class="tool-label">最受欢迎：</span>
          <el-tag size="small" type="warning">{{ getToolDisplayName(toolStats.mostPopularTool) }}</el-tag>
        </div>
      </div>
    </div>

    <!-- 系统状态卡片 -->
    <div class="stat-card system-card">
      <div class="card-header">
        <div class="card-icon">
          <el-icon size="24" color="#F56C6C"><Monitor /></el-icon>
        </div>
        <div class="card-info">
          <h3>系统状态</h3>
          <p class="card-description">系统运行监控</p>
        </div>
      </div>
      <div class="card-content">
        <div class="primary-stat">
          <span class="stat-value system-uptime">{{ dateDiffInWeekdays(new Date(systemStats.uptime), new Date()) }}天</span>
          <span class="stat-label">运行时间</span>
        </div>
        <div class="secondary-stats">
          <div class="stat-item">
            <span class="stat-value">{{ systemStats.apiResponseTime }}ms</span>
            <span class="stat-label">响应时间</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ systemStats.errorCount }}</span>
            <span class="stat-label">错误数</span>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <div class="resource-usage">
          <div class="resource-item">
            <span class="resource-label">CPU</span>
            <el-progress :percentage="systemStats.resourceUsage.cpu" :show-text="false" color="#F56C6C" :stroke-width="6" />
            <span class="resource-value">{{ systemStats.resourceUsage.cpu }}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { User, Document, Tools, Monitor } from "@element-plus/icons-vue";
import type { UserStatistics, TaskStatistics, ToolStatistics, SystemStatistics } from "../types/home";
import { dateDiffInWeekdays } from "@/utils/index";

interface Props {
  userStats: UserStatistics;
  taskStats: TaskStatistics;
  toolStats: ToolStatistics;
  systemStats: SystemStatistics;
}

defineProps<Props>();

// 工具名称映射
const getToolDisplayName = (toolType: string) => {
  const toolNames: { [key: string]: string } = {
    Tool_base64: "Base64编码",
    Tool_datetime: "时间转换",
    Tool_byte: "字节转换",
    Tool_imageCompress: "图片压缩",
    Tool_dataGenerator: "数据生成器",
    Tool_jsonFormatter: "JSON格式化"
  };
  return toolNames[toolType] || toolType;
};
</script>

<style lang="scss" scoped>
.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.stat-card {
  padding: 24px;
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
  transition: all 0.3s ease;
  &:hover {
    box-shadow: 0 4px 20px rgb(0 0 0 / 15%);
    transform: translateY(-2px);
  }
  .card-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
    .card-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      background: var(--el-color-primary-light-9);
      border-radius: 10px;
    }
    .card-info {
      h3 {
        margin: 0 0 4px;
        font-size: 16px;
        font-weight: 600;
        color: var(--el-text-color-primary);
      }
      .card-description {
        margin: 0;
        font-size: 12px;
        color: var(--el-text-color-regular);
      }
    }
  }
  .card-content {
    margin-bottom: 20px;
    .primary-stat {
      margin-bottom: 16px;
      text-align: center;
      .stat-value {
        display: block;
        font-size: 32px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--el-text-color-primary);
        &.system-uptime {
          font-size: 20px;
        }
      }
      .stat-label {
        display: block;
        margin-top: 4px;
        font-size: 14px;
        color: var(--el-text-color-regular);
      }
    }
    .secondary-stats {
      display: flex;
      justify-content: space-between;
      .stat-item {
        flex: 1;
        text-align: center;
        .stat-value {
          display: block;
          font-size: 18px;
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
        .stat-label {
          display: block;
          margin-top: 4px;
          font-size: 12px;
          color: var(--el-text-color-regular);
        }
      }
    }
  }
  .card-footer {
    .progress-info {
      .progress-label {
        display: block;
        margin-bottom: 8px;
        font-size: 12px;
        color: var(--el-text-color-regular);
      }
      .el-progress {
        margin-bottom: 0;
      }
    }
    .tool-info {
      display: flex;
      gap: 8px;
      align-items: center;
      .tool-label {
        font-size: 12px;
        color: var(--el-text-color-regular);
      }
    }
    .resource-usage {
      .resource-item {
        display: flex;
        gap: 8px;
        align-items: center;
        .resource-label {
          min-width: 35px;
          font-size: 12px;
          color: var(--el-text-color-regular);
        }
        .el-progress {
          flex: 1;
        }
        .resource-value {
          min-width: 35px;
          font-size: 12px;
          color: var(--el-text-color-primary);
          text-align: right;
        }
      }
    }
  }
}

// 不同类型卡片的个性化样式
.user-card .card-icon {
  background: rgb(64 158 255 / 10%);
}
.task-card .card-icon {
  background: rgb(103 194 58 / 10%);
}
.tool-card .card-icon {
  background: rgb(230 162 60 / 10%);
}
.system-card .card-icon {
  background: rgb(245 108 108 / 10%);
}

// 响应式设计
@media (width <= 768px) {
  .overview-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .stat-card {
    padding: 20px;
    .card-content {
      .primary-stat {
        .stat-value {
          font-size: 28px;
        }
      }
      .secondary-stats {
        .stat-item {
          .stat-value {
            font-size: 16px;
          }
        }
      }
    }
  }
}

@media (width >= 769px) and (width <= 1024px) {
  .overview-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
